import { useState } from "react";
// import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
// import  styleString from './App.css?raw'
// import  styleInline from './App.css?inline'

import ContactForm from "@components/ContactForm";
import Count from "@components/Count";
import EffectComparison from "@components/EffectComparison";
import OptimizedComponent from "@components/OptimizedComponent";
import ActivityMode from "@components/ActivityMode";
import ChatRoom from "@components/ChatRoom";
import UpdateName from "@components/OptimisticUpdate";
import Tabs from "@components/Tabs";
import FormAction, { FormSubmit } from "@components/FormAction";
import RefsComp from "@components/RefsComp";
import UseValue from "@components/UseValue";

console.log(__APP_VERSION__);
console.log(import.meta.env.CUSTOM_VAR);
const images = import.meta.glob("./assets/*.{svg,png,jpg,jpeg}", {
  query: "?url",
  import: "default",
  eager: true,
});
const reactLogo = images["./assets/react.svg"];

const reactLogo2 = new URL("./assets/react.svg", import.meta.url).href;
function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h2>React19 - Activity</h2>
      <ActivityMode />
      <h2>React19 - useEffectEvent</h2>
      <ChatRoom />
      <h2>React19 -  useOptimistic</h2>
      <UpdateName currentName="Tom" />
      <h2>React19 - useActionState</h2>
      <ContactForm />
      <h2>React19 -  useTransition</h2>
      <Tabs />
      <h2>React19 - Form Action</h2>
      <FormSubmit />
      <FormAction />
      <h2>React19 - Refs as props</h2>
      <RefsComp />
      <h2>React19 - use</h2>
      <UseValue />
      <h2>React Hooks</h2>
      <h6>useCallback</h6>
      <Count />
      <h6>useLayoutEffect</h6>
      <EffectComparison />
      <h6>useMemo</h6>
      <OptimizedComponent
        items={[
          { id: 1, name: "x" },
          { id: 2, name: "y" },
          { id: 3, name: "xy" },
        ]}
        filter="x"
      />
      <div>
        <a href="/">首页</a>
        <a href="/about.html">关于我们</a>
        <a href="/contact.html">联系我们</a>
      </div>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo2} className="logo react" alt="React logo" />
        </a>
      </div>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  );
}

export default App;
